<template>
	<view class="mb40">
		<u-navbar
			back-text=""
			 back-icon-size="40" 
			 :height="height" 
			 :back-icon-name="backIconName" 
			 :title-color="titleColor"
			 :background="background"
			 :border-bottom="borderBottom"
			 :back-icon-color="backIconColor"
			 :title="Title">
			 <view class="nav-box">
			 	
			 	<view class="_df _ac mb30" style="position: relative;">
			 		<!-- <view class="back">
			 			<image @click="back" src="@/static/img/common/topBack.png" alt="" />
			 		</view> -->
			 		<view class="title-box">
			 			<!-- <view class="title">{{title}}</view> -->
			 			<!-- <view class="time _df _ac" @click="showTime">
			 				<span>{{time}}</span>
			 				<u-icon name="arrow-down-fill" color="#111111" size="16" style="margin: 0 0 0 10rpx;"></u-icon>
			 			</view> -->
			 			<view class="time _df _ac _jc" style="margin: 10rpx auto 0;">
			 				<span v-if="type=='date'">
			 					<view class="" @click="show = true">
			 						{{time}}
			 					</view>
			 					<!-- <zxz-uni-datetime-picker v-else type="date" placeholder="none" :clear-icon="false"
			 						v-model="dateString" @change="changeFn1">
			 						{{time}}
			 					</zxz-uni-datetime-picker> -->
			 				</span>
			 				<span v-else-if="type=='week'" @click="open()">
			 					<!-- <zxz-uni-datetime-picker type="week" v-model="yearWeek" placeholder="选择周" :clear-icon="false"
			 					 isMonday @change="changeFn2">
			 					 {{time}}
			 					 </zxz-uni-datetime-picker> -->
			 					 {{time}}
			 				</span>
			 				<span v-else-if="type=='yearMonth'">
								<view class="" @click="monthShow = true">
									{{time}}
								</view>
			 					<!-- <zxz-uni-datetime-picker type="yearMonth" v-model="yearMonth" placeholder="none" :clear-icon="false"
			 						 @change="changeFn3">
			 						{{time}}
			 					</zxz-uni-datetime-picker> -->
			 				</span>
			 				<u-icon name="arrow-down-fill" color="#111111" size="16" style="margin: 0 0 0 10rpx;"></u-icon>
			 			</view>
			 		</view>
			 	</view>
			 	<view class="time-tabs" v-if="showTab">
			 		<template v-for="(item, index) in tabList">
			 		  <view
			 			class="item _df _ac _jc"
			 			:class="item.isActive ? 'active' : ''"
			 			:key="index"
			 			@click="changeTab(item, index)"
			 			>{{ item.name }}</view
			 		  >
			 		</template>
			 	</view>
			 	<view class="week-box _df" v-if="isShowWeek">
			 		<view class="item" v-for="(item,index) in dateList" :key="index" @click="dayChange(item,index)">
			 			<view class="week">
			 				{{item.week}}
			 			</view>
			 			<view class="day" :class="item.isActive ? 'active' : ''">
			 				{{item.day}}
			 			</view>
			 		</view>
			 	</view>
			 	
			 </view>
		 </u-navbar>
		
		<u-calendar active-bg-color="#6387FF " v-model="show" mode="date" @change="change"></u-calendar>
		<u-popup v-model="showPop" mode="bottom" @close="close" width="80%" height="60vh" border-radius="14" :closeable="false">
			<view class="popCon">
				<ccq-week-picker :value="value" @change="getWeeks"></ccq-week-picker>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="monthShow" @confirm="changeFn3" :params="params"></u-picker>
	</view>
</template>

<script>
	import moment from "moment";
	import dayjs from 'dayjs';
	    // 引入得到周信息函数
	import weekjs from '../../components/ccq-week-picker/week.js';
	export default {
		name:"health-title",
		props: {
		  // 标题
		  Title: {
		    type: String,
		    default: '详情',
		  },
		  Mode:{
			type: String,
			default: 'date',  
		  },
		  showWeek:Boolean,
		  background:{
		  	type: Object,
		  	default() {
		  	  return {
		  		  backgroundColor:'#fff'
		  	  };
		  	},
		  },
		  height:{
		    type:String,
		    default:'50'
		  },
		  titleColor:{
		  	type:String,
		  	default:'#000'
		  },
		  backIconName:{
		  	type:String,
		  	default:''
		  },
		  backIconColor:{
		  	type:String,
		  	default:'#000'
		  },
		  borderBottom:{
		  	type:Boolean,
		  	default:true
		  },
		  showTab:{
			 type: Boolean,
			 default: true, 
		  },
		  Type:{
			 type: String,
			 default: 'date', 
		  }
		},
		data() {
			return {
				title:'心率',
				time: moment().format('MM-DD'),
				show:false,
				mode: 'date',
				type:'date',
				tabList:[
					{
						name:'日',
						isActive:true,
						type:'date',
						state:1
					},
					{
						name:'周',
						isActive:false,
						type:'week',
						state:2
					},
					{
						name:'月',
						isActive:false,
						type:'yearMonth',
						state:3
					}
				],
				timePage:{
					sTime:uni.$_momentTime(moment(),'YYYY-MM-DD'),
					eTime:'',
					dateTxt:'日',
					type:1
				},
				dateList:[],
				weekList:[],
				isShowWeek:false,
				dateString:this.getDateTime(new Date()),
				yearWeek:'2024年33周',
				yearMonth:null,
				date:'2024-08-19', //日期
				startFromMonday:true ,
				showPop:false,
				today:dayjs().format('YYYY-MM-DD'),
				yearMonthWeek: '',
				week: '',
				value: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				monthShow: false
				
			};
		},
		watch:{
			showWeek(v){
				this.isShowWeek = v
			}
		},
		methods:{
			close(){
				
			},
			weekInit(){
				let y = dayjs().year();
				let m = dayjs().month();
				let res =  weekjs.getWeeksByMonth(y, m+1,this.today,1); 
				this.setResultInfo(res);
			},
			getWeeks(res) {
				if (res) { 
					this.setResultInfo(res);
				}
				this.showPop = false
			},
			// 设置结果集
			setResultInfo(i){
				console.log(i);
				let info = i.week;
				this.value = info.val;
				let year = info.year==this.year?'':info.year+'-'
				let sTime = info.start.slice(0,5)
				let eTime = info.end.slice(0,5)
				let time = info.text.split("(")[1]
				this.time = year  +time.split(")")[0];
				this.timePage.sTime = info.val
				this.timePage.eTime = info.year+'-'+eTime
				this.$emit('timeBack',this.timePage)
			},
			open(){
				this.showPop = true
			},
			weekInit(e){
				console.log(e);
			},
			weekConfirm(e) {
				console.log(e);
				this.getDays(e.fulldate)
			},
			//周日期选择
			dayChange(e,index){
				this.dateList.map((item,i) =>{
					if(index == i){
						item.isActive = true
						this.time = item.date.slice(5,10)
						this.timePage.sTime = item.date
						this.$emit('timeBack',this.timePage,this.dateList)
					}else{
						item.isActive = false
					}
				})
			},
			getWeekNumber(date) {
			  date = new Date(date);
			  date.setHours(0, 0, 0);
			  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
			  var week1 = new Date(date.getFullYear(), 0, 4);
			  return 1 + Math.round(((date - week1) / 8.64e7 - 3 + (week1.getDay() + 6) % 7) / 7);
			},
			getDateTime(date, addZero = true) {
				return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
			},
			getDate(date, addZero = true) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			getTime(date, addZero = true) {
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ?
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
					`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			//周开始和结束
			getWeekStartAndEnd(year, weekNumber) {
			  let date = new Date(year, 0, 1); // 设定为年份的第一天
			  date.setDate(date.getDate() + (weekNumber - 1) * 7); // 计算第几周的第一天
			  let startDate = new Date(date);
			  startDate.setDate(startDate.getDate() - startDate.getDay() + 1); // 周一
			  let endDate = new Date(startDate);
			  endDate.setDate(endDate.getDate() + 6); // 周日
			  return {
			    start: uni.$_momentTime(startDate,'YYYY-MM-DD'),
			    end: uni.$_momentTime(endDate,'YYYY-MM-DD')
			  };
			},
			//月份开始和结束
			getMonthStartAndEnd(year, month) {
			  const startDate = new Date(year, month - 1, 1); // 月份是从0开始的，所以减1
			  const endDate = new Date(year, month, 0); // 上个月的第0天，即上个月的最后一天
			  return {
			    start: uni.$_momentTime(startDate,'YYYY-MM-DD'),
			    end: uni.$_momentTime(endDate,'YYYY-MM-DD')
			  };
			},
			changeFn1(e) {
				console.log('日', e);
				this.timePage.sTime = e
				this.timePage.eTime = ''
				let year = e.slice(0,4)
				let year2 = this.year != year?year+'年':''
				this.time = year2 + uni.$_momentTime(e,'MM月DD日')
				this.$emit('timeBack',this.timePage)
			},changeFn2(e) {
				// console.log('周', e);
				let year = e.split("年")[0];
				let week = e.split("年")[1].split("周")[0];
				let yearWeek = this.getWeekStartAndEnd(year,week)
				this.time = uni.$_momentTime(yearWeek.start,'YYYY-MM-DD')+'-' + uni.$_momentTime(yearWeek.end,'MM-DD')
				this.timePage.sTime = uni.$_momentTime(yearWeek.start,'YYYY-MM-DD')
				this.timePage.eTime = uni.$_momentTime(yearWeek.end,'YYYY-MM-DD')
				this.$emit('timeBack',this.timePage)
			},changeFn3(e) {
				console.log('月份:', e);
				let year = e.year;
				let week = e.month;
				let yearMonth = this.getMonthStartAndEnd(year,week)
				let newyear = year==this.year?'':year+'-'
				this.time = newyear +  uni.$_momentTime(yearMonth.start,'MM-DD')+'至' + uni.$_momentTime(yearMonth.end,'MM-DD')
				this.timePage.sTime = uni.$_momentTime(yearMonth.start,'YYYY-MM-DD')
				this.timePage.eTime = uni.$_momentTime(yearMonth.end,'YYYY-MM-DD')
				this.$emit('timeBack',this.timePage)
			},
			maskClick() {
				// console.log('----maskClick事件');
			},
			back(){
				uni.navigateBack(-1)
			},
			showTime(){
				this.show = true
			},
			change(e) {
				console.log(e)
				if(this.mode == 'date'){
					let year = e.year == this.year?'':e.year +'-'
					this.time =  year + e.result.slice(5,10)
					this.timePage.sTime = e.result
					
				}else{
					let year = e.startYear == this.year && e.endYear==this.year?'':e.startYear +'年'
					this.time = year + moment(e.startDate).format('MM月DD日') +'-'+ moment(e.endDate).format('MM月DD日')
				}
				
				this.getDays(this.timePage.sTime)
				this.dateList.map((item,index) =>{
					if(item.date == e.result){
						item.isActive = true
					}else{
						item.isActive = false
					}
				})
				if(this.isShowWeek){
					this.$emit('timeBack',this.timePage,this.dateList)
				}else{
					this.$emit('timeBack',this.timePage)
				}
				
			},
			changeTab(e,index) {
				this.type = e.type
				this.timePage.type = e.state
				if(e.name == '日'){
					this.mode = 'date'
					this.time = uni.$_momentTime(moment(),'MM-DD')
					this.timePage.sTime = uni.$_momentTime(moment(),'YYYY-MM-DD') 
					this.timePage.eTime = ''
					this.timePage.dateTxt = '日'
					this.$emit('timeBack',this.timePage)
				}else if(e.name == '周'){
					this.mode = 'range'
					let sTime = uni.$_momentTime(moment('00:00:00', 'HH:mm:ss').weekday(1),'MM-DD')
					this.timePage.sTime = uni.$_momentTime(moment('00:00:00', 'HH:mm:ss').weekday(1),'YYYY-MM-DD')
					let eTime = uni.$_momentTime(moment('23:59:59', 'HH:mm:ss').weekday(7),'MM-DD')
					this.timePage.eTime = uni.$_momentTime(moment('23:59:59', 'HH:mm:ss').weekday(7),'YYYY-MM-DD')
					this.time = sTime +'至' +eTime
					this.timePage.dateTxt = '周'
					let weekTxt = this.getWeekNumber(new Date())
					// this.yearWeek=this.year+'年'+weekTxt+'周'
					// console.log(this.yearWeek,657)
					// this.$nextTick(() => {
					//     this.yearWeek=[this.year,weekTxt]
					// })
					
					this.$emit('timeBack',this.timePage)
				}
				else if(e.name == '月'){
					this.mode = 'range'
					let sTime = uni.$_momentTime(moment().startOf('month'),'MM-DD')
					this.timePage.sTime  = uni.$_momentTime(moment().startOf('month'),'YYYY-MM-DD')
					let eTime = uni.$_momentTime(moment().endOf('month'),'MM-DD')
					this.timePage.eTime = uni.$_momentTime(moment().endOf('month'),'YYYY-MM-DD')
					this.time = sTime +'至' +eTime
					this.timePage.dateTxt = '月'
					let mon = new Date().getMonth() + 1
					this.yearMonth=this.year+ '-' +mon
					this.$emit('timeBack',this.timePage)
				}
				this.tabList.map((item,i) =>{
					if(e.name==item.name){
						item.isActive = true
					}else{
						item.isActive = false
					}
				})
			},
			getWeekDataList(data) {
				//根据日期获取本周周一~周日的年-月-日
				var weekList = [];
				var date = new Date(data);
				//判断本日期是否为周日，获取本周一日期
				if(date.getDay()=="0"){
					date.setDate(date.getDate() -6);
				}else {
					date.setDate(date.getDate() - date.getDay() + 1);
				}
				var myDate=date.getDate();
				var myMonth=date.getMonth() + 1;
				if(date.getDate()<10){
					myDate= '0'+ myDate;
				}
				if(date.getMonth() + 1<10){
					myMonth='0'+myMonth;
				}
				weekList.push(date.getFullYear() + "-" + myMonth+ "-" + myDate);
				// 获取周二以后日期
				for(var i=0;i<6;i++) {
					date.setDate(date.getDate() + 1);
					myDate=date.getDate();
					myMonth=date.getMonth() + 1;
					if(date.getDate()<10){
						myDate= '0'+ myDate;
					}
					if(date.getMonth() + 1<10){
						myMonth='0'+myMonth;
					}
					weekList.push(date.getFullYear() + "-" + myMonth+ "-" +myDate);
				}
				// console.log(weekList);
				return weekList
			},
			getDays(date){
				let weekList = this.getWeekDataList(date)
				let dateList = []
				let weeks = {
				  "6":'日',
				  "0":'一',
				  "1":'二',
				  "2":'三',
				  "3":'四',
				  "4":'五',
				  "5":'六',
				}
				let today = uni.$_momentTime(moment(),'YYYY-MM-DD')
				weekList.map((item,index) =>{
					let dateObj = {
						week: weeks[index],
						day: item.slice(8,10),
					    date:uni.$_momentTime(item,"YYYY-MM-DD"),
						isActive:item==today?true:false
					}
					dateList.push(dateObj);
				})
				this.dateList = dateList
				console.log(this.dateList,666)
				// return dateObj
			
			},
			
		},
		mounted() {
			
			this.year = new Date().getFullYear()
			this.type = this.Type
			this.title = this.Title
			this.mode = this.Mode
			this.isShowWeek = this.showWeek
			this.getDays(this.year + '-' +this.time)
			this.weekInit();
			// this.yearWeek = this.getDateTime(new Date())
			if(this.isShowWeek){
				this.$emit('timeBack',this.timePage,this.dateList)
			}else{
				this.$emit('timeBack',this.timePage)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-calendar__bottom{
		padding-bottom: 50rpx;
	}
	/deep/.u-title{
		font-size: 34rpx !important;
		font-family: $uni-font-family-Bold;
	}
	/deep/.u-navbar-inner{
		align-items: flex-start;
	}
	/deep/.u-back-wrap{
		background: url(@/static/img/common/topBack.png) no-repeat center / 40rpx 40rpx;
		padding: 30rpx;
		margin: 10rpx 0 0 30rpx;
	}
	/deep/.u-icon-wrap{
		// opacity: 0;
		// padding-left: 30rpx;
	}
	/deep/.u-btn--primary{
		// background-color: #FF4651 !important;
		// border-color: #FF4651 !important;
	}
	/deep/.uni-calendar--fixed{
		z-index: 999 !important;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--before-checked, 
	/deep/.uni-calendar-item--multiple .uni-calendar-item--after-checked{
		background-color: #007aff !important;
		border-radius: 50% !important;
		box-sizing: border-box;
		border: 3px solid #F6F7FC !important;
		z-index: 99;
		position: relative;
	}
	.nav-box{
		// padding: 50rpx 0 0;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
		width: calc(100% - 60rpx);
		z-index: 33;
		// background-color: #fff;
		// box-shadow: 0 0 4rpx 4rpx rgba(0,0,0,0.03);
		.back{
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.title-box{
			text-align: center;
			margin: 0 auto;
			.title{
				font-size: 36rpx;
				font-family: $uni-font-family-Heavy;
				color: #000;
				margin-bottom: 15rpx;
			}
			.time{
				font-size: 28rpx;
				font-family: $uni-font-family-Medium;
				color: #000;
			}
		}
		.time-tabs{
			text-align: center;
			font-size: 0;
			height: 72rpx;
			padding: 6rpx 10rpx;
			background: #ebebeb;
			border-radius: 24rpx;
			display: flex;
			.item{
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				background: transparent;
				border-radius: 20rpx;
				text-align: center;
				font-family: $uni-font-family-Medium;
				font-size: 26rpx;
				z-index: 2;
				position: relative;
				color: #1E1E1E;
				transition: 0.3s ease;
			}
			.active{
				background: #fff;
			}
		}
		.week-box{
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #eee;
			.item{
				flex: 1;
				text-align: center;
				.week{
					font-size: 24rpx;
					color: #aaa;
					margin-bottom: 20rpx;
					font-family: $uni-font-family-Medium;
				}
				.day{
					font-size: 28rpx;
					color: #111;
					font-family: $uni-font-family-Heavy;
				}
				.active{
					color: #FF5018;
				}
			}
		}
	}
	.nav-box2{
		position: relative;
		margin-bottom: 40rpx;
	}
</style>